<template>
  <div>
    <van-loading  v-if="loading"/>
    <van-icon
      :color="value ? '#ffa500' : '#777'"
      :name="value ? 'star' : 'star-o'"
      @click="onCollect"
      v-else
    />
  </div>
</template>

<script>
import {reqeustCollect,reqeustOnCollect} from '@/api'
export default {
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    id:{
        type: String ||Number,
        required:true,
    }
  },
  data(){
    return {
        loading:false
    }
  },
  methods:{
    async onCollect(){
        // 判断是否收藏
        try {
            this.loading=true
            if(this.value){
            // 已收藏
            await reqeustOnCollect(this.id)
        }else{
            // 未收藏
            await  reqeustCollect(this.id)   
        }
        // 子传父
        this.$emit('input',!this.value)
        }finally{ 
        this.loading = false
        }
    }
  }
};
</script>

<style lang="less" scoped></style>
